<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script th:src="@{/asserts/scripts/JQurey3.6.4.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .loginClass {
            width: 30%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
        <div id="app">
            <div class="loginClass">
                <h3 style="text-align: center">用户登录</h3>
                <!--<form>
                    username:<input type="text" v-model="username" /> <p />

                    password:<input type="password" v-model="password" />  <p />

                    <input type="button" value="登 录" @click.prevent="login" />
                </form>-->

                <el-form :model="loginForm" status-icon  label-width="100px" :rules="loginFormRules"  ref="loginForm" class="demo-ruleForm" size="mini">
                    <el-form-item label="用户名:" prop="username">
                        <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click.prevent="login">登录</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>

        <script>
            let vueApp = new Vue({
                el:"#app",
                data:{
                    loginForm:{
                        username:'',
                        password:''
                    },
                    loginFormRules:{
                        username:[
                            { required: true, message: '用户名不能为空', trigger: 'blur' },
                            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                        ],
                        password:[
                            { required: true, message: '密码不能为空', trigger: 'blur' },
                            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                        ]
                    }
                },
                methods:{
                    login(){
                        //发送请求登录  （ajax）
                        /*
                            jquery发送ajax请求  有三种方式
                             url  : 请求地址
                             fun  : 回调函数  接收后台返回的数据
                             type : 返回数据的类型  text、json、xml 默认是 text (文本)
                            1. $.get(url,fun,type) ;
                                params:发送的参数
                            2. $.post(url,params,fun,type);
                            3. $.ajax({
                                async:‘true（异步）/false（同步） 设置是同步还是异步 ’
                                type:'get/post',
                                url: '发送请求的地址',
                                data: '发送的数据',
                                dataType:'接收的数据类型 text、json、xml',
                                contentType: '请求的MIME类型 发送数据的类型'，
                                headers ：‘请求头’,
                                success:function(data){
                                    //请求成功以后的接收返回的数据
                                },
                                error:function(){
                                    //请求失败之后 执行的函数
                                }
                            })
                         */
                        //http://localhost:8080/userdemo/user/login
                        let url = "./user/login" ;
                        let params = "username="+this.loginForm.username+"&password="+this.loginForm.password ;
                        $.post(url,params,function (data){
                            console.log(data);
                            //请求之后返回的值
                            if (data.code == 200) {
                                alert(data.msg) ;
                                //转到主页
                                location.href = './user.html' ;
                            }else {
                                alert(data.msg);
                            }
                        },"json");
                    }
                }
            })
        </script>
</body>
</html>